import { Card, Col, Radio, Row } from 'antd';
import { useState } from 'react';
import DataCard from './dataChartCard';
import FhSyPieCard from './fhSyPieCard';
type PropField = {
  title: string;
  data: API.JfData;
  height: number;
  loading: boolean;
};
const FhSyCard: React.FC<PropField> = (props) => {
  const [valType, setValType] = useState(1);
  const data = props.data;
  const dnsy =
    valType === 1 ? data.ztZyCurrVal : valType === 2 ? data.jxedCurrVal : data.fyedCurrVal;
  const qnsy =
    valType === 1 ? data.ztZyQntqVal : valType === 2 ? data.jxedQntqVal : data.fyedCurrVal;
  const title = valType === 1 ? '整体' : valType === 2 ? '绩效' : '费用';
  return (
    <Card
      size="small"
      title={props.title}
      bodyStyle={{ padding: '0px', height: props.height }}
      extra={
        <Radio.Group
          value={valType}
          size="small"
          onChange={(e) => setValType(Number(e.target.value))}
        >
          <Radio.Button key={1} value={1}>
            整体
          </Radio.Button>
          <Radio.Button key={2} value={2}>
            绩效
          </Radio.Button>
          <Radio.Button key={3} value={3}>
            费用
          </Radio.Button>
        </Radio.Group>
      }
    >
      <Row gutter={8}>
        <Col span={10}>
          <DataCard
            title={title}
            curr_val={dnsy}
            qytq_val={qnsy}
            loading={props.loading}
            height={58}
          />
        </Col>
        <Col span={14}>
          <FhSyPieCard datas={data.fhSyZyDatas} height={68} label="使用资源" />
        </Col>
      </Row>
    </Card>
  );
};
export default FhSyCard;
